<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业资产管理系统</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link rel="stylesheet" crossorigin href="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.24/index.css" />
    <script type="module" crossorigin src="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.24/index.js"></script>
    <script>
        window.CHATBOT_CONFIG = {
            endpoint: "https://webchat-bot-wd-wsvleojipq.cn-hangzhou.fcapp.run/chat",            displayByDefault: false, // 默认不展示 AI 助手聊天框
            aiChatOptions: { // aiChatOptions 中 options 会传递 aiChat 组件，自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat
                conversationOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#conversation-options
                    conversationStarters: [
                        {prompt: '哪款手机续航最长？'},
                        {prompt: '你们有哪些手机型号？'},
                        {prompt: '有折叠屏手机吗?'},
                    ]
                },
                displayOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#display-options
                    height: 600,
                },
                personaOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#chat-personas
                    assistant: {
                        name: '你好，我是你的 AI 助手',
                        // AI 助手的图标
                        avatar: 'https://img.alicdn.com/imgextra/i2/O1CN01Pda9nq1YDV0mnZ31H_!!6000000003025-54-tps-120-120.apng',
                        tagline: '您可以尝试点击下方的快捷入口开启体验！',
                    }
                }
            },
            dataProcessor: {
                /**
                 * 在向后端大模型应用发起请求前改写 Prompt。
                 * 比如可以用于总结网页场景，在发送前将网页内容包含在内，同时避免在前端显示这些内容。
                 * @param {string} prompt - 用户输入的 Prompt
                 * @param {string}  - 改写后的 Prompt
                 */
                rewritePrompt(prompt) {
                    return prompt;
                }
            }
        };
    </script>
    <style>
        :root {
            /* webchat 工具栏的颜色 */
            --webchat-toolbar-background-color: #1464E4;
            /* webchat 工具栏文字和按钮的颜色 */
            --webchat-toolbar-text-color: #FFF;
        }
        /* webchat 对话框如果被遮挡，可以尝试通过 z-index、bottom、right 等设置来调整位置 */
        .webchat-container {
            z-index: 100;
            bottom: 10px;
            right: 10px;
        }
        /* webchat 的唤起按钮如果被遮挡，可以尝试通过 z-index、bottom、right 等设置来调整位置 */
        .webchat-bubble-tip {
            z-index: 99;
            bottom: 20px;
            right: 20px;
        }

    </style>
    <script src="/echarts.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/css/zc.css">
    <style>


        /* 内容区域 */
        .content {
            flex: 1;
            padding: 1.5rem;
            margin-left: 250px;
        }

        .page-title {
            margin-bottom: 1.5rem;
            color: var(--primary-color);
            font-weight: 600;
            border-bottom: 2px solid var(--accent-color);
            padding-bottom: 0.5rem;
            display: inline-block;
        }

        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 1.5rem;
            border: none;
        }

        .card-header {
            background-color: white;
            border-bottom: 1px solid var(--border-color);
            padding: 1rem 1.5rem;
            font-weight: 600;
            color: var(--primary-color);
        }

        .card-body {
            padding: 1.5rem;
        }

        .stats-card {
            background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
            color: white;
            border-radius: 8px;
            padding: 1.5rem;
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }

        .stats-card:hover {
            transform: translateY(-5px);
        }

        .stats-icon {
            background-color: rgba(255, 255, 255, 0.2);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
        }

        .stats-info h3 {
            font-size: 1.8rem;
            margin-bottom: 0.25rem;
            font-weight: 700;
        }

        .stats-info p {
            margin: 0;
            opacity: 0.8;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
        }

        .table th {
            background-color: var(--light-bg);
            color: var(--primary-color);
            font-weight: 600;
        }

        .table th, .table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        .table tr:hover {
            background-color: var(--hover-color);
        }

        .badge {
            padding: 0.4rem 0.6rem;
            border-radius: 4px;
            font-weight: 500;
            font-size: 0.75rem;
        }

        .badge-success {
            background-color: #28a745;
            color: white;
        }

        .badge-warning {
            background-color: #ffc107;
            color: #212529;
        }

        .badge-danger {
            background-color: #dc3545;
            color: white;
        }

        .btn-primary {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }

        .btn-primary:hover {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
        }

        /* 图表容器样式 */
        .chart-container {
            height: 300px;
            width: 100%;
            margin-bottom: 1.5rem;
        }

        /* 表单样式 */
        .form-control:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
        }

        .form-label {
            font-weight: 500;
            color: var(--primary-color);
        }

        /* 模态框样式 */
        .modal-header {
            background-color: var(--primary-color);
            color: var(--light-text);
        }

        .modal-footer {
            border-top: 1px solid var(--border-color);
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .sidebar {
                width: 70px;
                overflow: visible;
            }

            .sidebar .logo-text,
            .sidebar .sidebar-link span,
            .sidebar .dropdown-toggle::after {
                display: none;
            }

            .sidebar-dropdown .sidebar-link {
                padding-left: 1.5rem;
            }

            .content {
                margin-left: 70px;
            }
        }

        @media (max-width: 768px) {
            .stats-row {
                flex-direction: column;
            }

            .header {
                padding: 0.5rem 1rem;
            }

            .header-right {
                gap: 10px;
            }
        }

        .dropdown-toggle::after{
            display: none;
        }

    </style>
</head>
<body>

<!-- 头部导航 -->
<header class="header">
    <div class="logo">
        <i class="bi bi-building"></i>
        <span>企业资产管理系统</span>
    </div>
    <div class="header-right">
        <div class="notification-icon">
            <i class="bi bi-bell"></i>
            <span class="notification-badge">3</span>
        </div>
        <div class="dropdown">
            <a href="#" class="dropdown-toggle" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="https://cn.bing.com/images/search?view=detailV2&ccid=OSFH3hIu&id=6E8860BEADD760736BEA422E3C9BF57317AA4F3E&thid=OIP.OSFH3hIukHqh-qrOvIfUWgAAAA&mediaurl=https%3a%2f%2fc-ssl.dtstatic.com%2fuploads%2fblog%2f202303%2f20%2f20230320145706_07ca5.thumb.400_0.jpeg&exph=498&expw=400&q=%e5%a4%b4%e5%83%8f&simid=607997774809754286&FORM=IRPRST&ck=19ACE4792BC2347CFE89D1BC55CC90F4&selectedIndex=0&itb=0" class="rounded-circle user-avatar" alt="用户头像">
                <span>管理员</span>
                <i class="bi bi-chevron-down"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                <li><a class="dropdown-item" href="#"><i class="bi bi-person me-2"></i>个人信息</a></li>
                <li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>系统设置</a></li>
                <li><hr class="dropdown-divider"></li>
                <li>
                    <form action="logout">
                    <a class="dropdown-item" href="#"><i class="bi bi-box-arrow-right me-2"></i>退出登录</a>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</header>


<!-- 主体内容 -->
<div class="main-container">
    <!-- 侧边栏 -->
    <aside class="sidebar">
        <ul class="sidebar-menu">
            <li class="sidebar-item">
                <a href="home.jsp" class="sidebar-link active">
                    <i class="bi bi-speedometer2"></i>
                    <span>控制面板</span>
                </a>
            </li>
            <li class="sidebar-item">
                <a href="Inventory_Query.jsp" class="sidebar-link dropdown-toggle" data-bs-target="#assetMenu">
                    <i class="bi bi-laptop"></i>
                    <span>资产管理</span>
                    <i class="bi bi-chevron-down"></i>
                </a>
                <ul class="sidebar-dropdown collapse" id="assetMenu">
                    <li class="sidebar-item">
                    <li class="sidebar-item">
                        <a href="Inventory_Query.jsp" class="sidebar-link active">
                            <span>库存查询</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="Asset_Inbound.jsp" class="sidebar-link">
                            <span>资产入库</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="Asset_Scrap.jsp" class="sidebar-link">
                            <span>资产报废</span>
                        </a>
                    </li>
                </ul>
            </li>

            <li class="sidebar-item">
                <a href="Maintenance_Apply.jsp" class="sidebar-link dropdown-toggle" data-bs-target="#maintenanceMenu">
                    <i class="bi bi-tools"></i>
                    <span>维修管理</span>
                    <i class="bi bi-chevron-down"></i>
                </a>
                <ul class="sidebar-dropdown collapse" id="maintenanceMenu">
                    <li class="sidebar-item">
                        <a href="Maintenance_Apply.jsp" class="sidebar-link">
                            <span>维修申请</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="maintenance_record.jsp" class="sidebar-link">
                            <span>维修记录</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="maintenance_statistics.jsp" class="sidebar-link">
                            <span>维修统计</span>
                        </a>
                    </li>
                </ul>
            </li>

            <li class="sidebar-item">
                <a href="user_management.jsp" class="sidebar-link dropdown-toggle" data-bs-target="#systemMenu">
                    <i class="bi bi-gear"></i>
                    <span>系统设置</span>
                    <i class="bi bi-chevron-down"></i>
                </a>
                <ul class="sidebar-dropdown collapse" id="systemMenu">
                    <li class="sidebar-item">
                        <a href="user_management.jsp" class="sidebar-link">
                            <span>用户管理</span>
                        </a>
                    </li>

                    <li class="sidebar-item">
                        <a href="Department_Management.jsp" class="sidebar-link">
                            <span>部门管理</span>
                        </a>
                    </li>
>
                </ul>
            </li>
        </ul>
    </aside>


    <!-- 内容区域 -->
    <main class="content">
        <!-- 控制面板页面 -->
        <div class="page-content" id="dashboardPage">
            <h2 class="page-title">控制面板</h2>
            <!-- 统计卡片 -->
            <div class="row mb-4">
                <div class="col-md-3 mb-3">
                    <div class="stats-card">
                        <div class="stats-icon">
                            <i class="bi bi-laptop"></i>
                        </div>
                        <div class="stats-info">
                            <h3 id="allAssetSum"></h3>
                            <p >总资产数量</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="stats-card">
                        <div class="stats-icon">
                            <i class="bi bi-arrow-left-right"></i>
                        </div>
                        <div class="stats-info">
                            <h3 id="noUseAsset"></h3>
                            <p>闲置资产</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="stats-card">
                        <div class="stats-icon">
                            <i class="bi bi-tools"></i>
                        </div>
                        <div class="stats-info">
                            <h3 id="upAsset"></h3>
                            <p>维修中资产</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="stats-card">
                        <div class="stats-icon">
                            <i class="bi bi-exclamation-triangle"></i>
                        </div>
                        <div class="stats-info">
                            <h3  id="useAsset"></h3>
                            <p>使用中资产</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- 最近资产活动 -->
                <div class="col-lg-8 mb-4">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <span>最近资产活动</span>
                            <button class="btn btn-sm btn-primary look" onclick="location.href='Inventory_Query.jsp'">查看全部</button>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>资产编号</th>
                                        <th>资产名称</th>
                                        <th>操作类型</th>
                                        <th>部门</th>
                                        <th>购买时间</th>
                                        <th>状态</th>
                                    </tr>
                                    </thead>
                                    <tbody id="zjzchd">
                                    <%--                                    <tr>--%>
                                    <%--                                        <td>AS-2023-1001</td>--%>
                                    <%--                                        <td>ThinkPad X1</td>--%>
                                    <%--                                        <td>借用</td>--%>
                                    <%--                                        <td>张三</td>--%>
                                    <%--                                        <td>2023-10-15 09:30</td>--%>
                                    <%--                                        <td><span class="badge badge-success">已批准</span></td>--%>
                                    <%--                                    </tr>--%>
                                    <%--                                    <tr>--%>
                                    <%--                                        <td>AS-2023-0892</td>--%>
                                    <%--                                        <td>投影仪 EP-760</td>--%>
                                    <%--                                        <td>归还</td>--%>
                                    <%--                                        <td>李四</td>--%>
                                    <%--                                        <td>2023-10-14 16:45</td>--%>
                                    <%--                                        <td><span class="badge badge-success">已完成</span></td>--%>
                                    <%--                                    </tr>--%>
                                    <%--                                    <tr>--%>
                                    <%--                                        <td>AS-2023-0765</td>--%>
                                    <%--                                        <td>打印机 HP M428</td>--%>
                                    <%--                                        <td>维修</td>--%>
                                    <%--                                        <td>王五</td>--%>
                                    <%--                                        <td>2023-10-13 11:20</td>--%>
                                    <%--                                        <td><span class="badge badge-warning">处理中</span></td>--%>
                                    <%--                                    </tr>--%>
                                    <%--                                    <tr>--%>
                                    <%--                                        <td>AS-2023-1105</td>--%>
                                    <%--                                        <td>显示器 Dell U2720Q</td>--%>
                                    <%--                                        <td>入库</td>--%>
                                    <%--                                        <td>赵六</td>--%>
                                    <%--                                        <td>2023-10-12 14:15</td>--%>
                                    <%--                                        <td><span class="badge badge-success">已完成</span></td>--%>
                                    <%--                                    </tr>--%>
                                    <%--                                    <tr>--%>
                                    <%--                                        <td>AS-2023-0433</td>--%>
                                    <%--                                        <td>服务器 Dell R740</td>--%>
                                    <%--                                        <td>报废申请</td>--%>
                                    <%--                                        <td>孙七</td>--%>
                                    <%--                                        <td>2023-10-11 10:05</td>--%>
                                    <%--                                        <td><span class="badge badge-danger">待审批</span></td>--%>
                                    <%--                                    </tr>--%>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 资产分类统计 -->
                <div class="col-lg-4 mb-4">
                    <div class="card">
                        <div class="card-header">
                            <span>资产分类统计</span>
                        </div>
                        <div class="card-body">
                            <div id="assetCategoryChart" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- 资产价值统计 -->
                <div class="col-lg-12 mb-4">
                    <div class="card">
                        <div class="card-header">
                            <span>资产价值统计</span>
                        </div>
                        <div class="card-body">
                            <div id="assetValueChart" style="width: 100%; height: 400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </main>


</div>



<!-- 页脚 -->
<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <span>版权所有 &copy; 2023 资产管理系统</span>
            </div>
            <div class="col-md-6 text-md-end">
                <span>技术支持：XXX公司</span>
            </div>
        </div>
    </div>
</footer>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 等待DOM加载完成
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化资产分类统计图表
        const assetCategoryChart = echarts.init(document.getElementById('assetCategoryChart'));
        const assetCategoryOption = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['电脑设备', '办公家具', '网络设备' ]
            },
            series: [
                {
                    name: '资产分类',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 580, name: '电脑设备' },
                        { value: 320, name: '办公家具' },
                        { value: 386, name: '网络设备' },
                    ]
                }
            ]
        };
        assetCategoryChart.setOption(assetCategoryOption);

        // 初始化资产价值统计图表
        const assetValueChart = echarts.init(document.getElementById('assetValueChart'));
        const assetValueOption = {
            tooltip: {
                trigger: 'axis',
                formatter: function(params) {
                    let result = params[0].name + '<br/>';
                    params.forEach(param => {
                        let value = param.value;
                        if (param.seriesName === '新增资产价值') {
                            value = '¥' + value.toLocaleString();
                        } else if (param.seriesName === '同比增长') {
                            value = value + '%';
                        }
                        result += param.marker + param.seriesName + ': ' + value + '<br/>';
                    });
                    return result;
                }
            },
            legend: {
                data: ['新增资产价值', '同比增长'],
                top: 10
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: [
                {
                    type: 'value',
                    name: '金额 (¥)',
                    position: 'left',
                    min: 3000, // 设置最小值为1000
                    max: 9000, // 设置最大值为10000
                    axisLabel: {
                        formatter: function(value) {
                            return '¥' + value.toLocaleString();
                        }
                    }
                },
                {
                    type: 'value',
                    name: '增长率 (%)',
                    position: 'right',
                    axisLabel: {
                        formatter: '{value}%'
                    }
                }
            ],
            series: [
                {
                    name: '新增资产价值',
                    type: 'bar',
                    data: [5100, 6300, 7700, 8900, 4500, 4700, 4900, 5500, 5700, 6400, 7200, 7700],
                    itemStyle: {
                        color: '#3498db'
                    }
                },
                {
                    name: '同比增长',
                    type: 'line',
                    yAxisIndex: 1,
                    smooth: true,
                    data: [-0.8, 1.2, 1.8, 2.3, 1.9, 2.5, 0.8, 1.5, 2.8, 5.2, 4.5, 6.2],
                    itemStyle: {
                        color: '#e74c3c'
                    }
                }
            ]
        };
        assetValueChart.setOption(assetValueOption);

        // 监听窗口大小变化，调整图表大小
        window.addEventListener('resize', function() {
            assetCategoryChart.resize();
            assetValueChart.resize();
        });

        // 初始化所有下拉菜单
        const dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'));
        dropdownElementList.map(function (dropdownToggleEl) {
            return new bootstrap.Dropdown(dropdownToggleEl);
        });

        // 获取所有带有dropdown-toggle类的链接
        const dropdownToggles = document.querySelectorAll('.sidebar-link.dropdown-toggle');

// ... existing code ...
// 为每个下拉菜单添加点击事件
// ... existing code ...
// 为每个下拉菜单添加点击事件
        dropdownToggles.forEach(toggle => {
            toggle.addEventListener('click', function(e) {
                const href = this.getAttribute('href');

                // 如果有href属性且不是#或javascript:，则执行导航
                if (href && href !== '#' && !href.startsWith('javascript')) {
                    window.location.href = href; // 执行页面跳转
                    return; // 结束函数
                }

                e.preventDefault(); // 阻止默认行为

                // 获取目标菜单的ID
                const targetId = this.getAttribute('data-bs-target');
                const targetMenu = document.querySelector(targetId);

                // 获取当前菜单的箭头图标
                const arrowIcon = this.querySelector('.bi-chevron-down, .bi-chevron-up');

                // 切换目标菜单的显示状态
                if (targetMenu) {
                    const isShowing = targetMenu.classList.toggle('show');
                    console.log(`Menu ${targetId} is now ${isShowing ? 'shown' : 'hidden'}`); // Debug log

                    // 根据显示状态更新箭头图标
                    if (arrowIcon) {
                        arrowIcon.classList.toggle('bi-chevron-down', !isShowing);
                        arrowIcon.classList.toggle('bi-chevron-up', isShowing);
                    }
                }

                // 关闭其他打开的下拉菜单
                document.querySelectorAll('.sidebar-dropdown').forEach(menu => {
                    if (menu !== targetMenu && menu.classList.contains('show')) {
                        menu.classList.remove('show');
                        // 重置其他菜单的箭头图标
                        const otherToggle = document.querySelector(`[data-bs-target="#${menu.id}"]`);
                        if (otherToggle) {
                            const otherArrow = otherToggle.querySelector('.bi-chevron-up');
                            if (otherArrow) {
                                otherArrow.classList.remove('bi-chevron-up');
                                otherArrow.classList.add('bi-chevron-down');
                            }
                        }
                    }
                });
            });
        });
// ... existing code ...
// ... existing code ...

        // 为所有非下拉菜单的侧边栏链接添加点击事件
        const sidebarLinks = document.querySelectorAll('.sidebar-link:not(.dropdown-toggle)');
        sidebarLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                // 如果是直接导航到另一个页面的链接，则清除当前活动状态，允许导航但不阻止默认行为
                const href = this.getAttribute('href');
                if (href && href !== '#' && !href.startsWith('javascript')) {
                    // 清除所有活动状态
                    document.querySelectorAll('.sidebar-link').forEach(item => {
                        item.classList.remove('active');
                    });
                    // 将当前链接设置为激活状态，页面跳转后会刷新状态
                    this.classList.add('active');
                    return; // 允许正常导航
                }

                e.preventDefault();

                // 移除所有侧边栏链接的活动状态
                document.querySelectorAll('.sidebar-link').forEach(item => {
                    item.classList.remove('active');
                });

                // 将当前链接设置为激活状态
                this.classList.add('active');

                // 处理页面内容显示逻辑...
                const linkText = this.querySelector('span')?.textContent;
                if (linkText) {
                    let pageId = '';

                    // 根据菜单文本确定要显示的页面ID
                    switch(linkText) {
                        case '控制面板':
                            pageId = 'dashboardPage';
                            break;
                        case '资产列表':
                            pageId = 'assetListPage';
                            break;
                        case '资产分类':
                            pageId = 'assetCategoryPage';
                            break;
                        case '资产入库':
                            pageId = 'assetInboundPage';
                            break;
                        case '资产报废':
                            pageId = 'assetScrapPage';
                            break;
                        case '库存查询':
                            pageId = 'inventoryQueryPage';
                            break;
                        case '库存盘点':
                            pageId = 'inventoryCheckPage';
                            break;
                        case '库存预警':
                            pageId = 'inventoryAlertPage';
                            break;
                        case '借用申请':
                            pageId = 'borrowApplyPage';
                            break;
                        case '归还记录':
                            pageId = 'returnRecordPage';
                            break;
                        case '超期管理':
                            pageId = 'overdueManagePage';
                            break;
                        case '维修申请':
                            pageId = 'maintenanceApplyPage';
                            break;
                        case '维修记录':
                            pageId = 'maintenanceRecordPage';
                            break;
                        case '维修统计':
                            pageId = 'maintenanceStatsPage';
                            break;
                        case '资产统计':
                            pageId = 'assetStatsPage';
                            break;
                        case '部门统计':
                            pageId = 'departmentStatsPage';
                            break;
                        case '财务报表':
                            pageId = 'financialReportPage';
                            break;
                        case '用户管理':
                            pageId = 'userManagePage';
                            break;
                        case '角色权限':
                            pageId = 'rolePermissionPage';
                            break;
                        case '部门管理':
                            pageId = 'departmentManagePage';
                            break;
                        case '系统日志':
                            pageId = 'systemLogPage';
                            break;
                    }

                    // 显示对应的页面
                    if (pageId) {
                        // 隐藏所有页面内容
                        document.querySelectorAll('.page-content').forEach(page => {
                            page.style.display = 'none';
                        });

                        const targetPage = document.getElementById(pageId);
                        if (targetPage) {
                            targetPage.style.display = 'block';
                        }
                    }
                }
            });
        });

        // 初始化：默认显示控制面板页面
        document.getElementById('dashboardPage').style.display = 'block';

        // 处理当前页面URL路径，确定哪个菜单应该被选中
        const currentPath = window.location.pathname;
        if (currentPath.endsWith('home.html') || currentPath.endsWith('/')) {
            // 已经默认选中控制面板了，不需要做任何事
        } else if (currentPath.includes('Asset_Management.html')) {
            // 选中资产管理
            const assetLink = document.querySelector('a[href="Asset_Management.html"]');
            if (assetLink) {
                document.querySelectorAll('.sidebar-link').forEach(link => link.classList.remove('active'));
                assetLink.classList.add('active');
                // 展开子菜单
                document.getElementById('assetMenu').classList.add('show');
            }
        } else if (currentPath.includes('Asset_List.html')) {
            // 选中资产列表
            const listLink = document.querySelector('a[href="Asset_List.html"]');
            if (listLink) {
                document.querySelectorAll('.sidebar-link').forEach(link => link.classList.remove('active'));
                listLink.classList.add('active');
                // 展开子菜单
                document.getElementById('assetMenu').classList.add('show');
            }
        } else if (currentPath.includes('Asset_Category.html')) {
            // 选中资产分类
            const categoryLink = document.querySelector('a[href="Asset_Category.html"]');
            if (categoryLink) {
                document.querySelectorAll('.sidebar-link').forEach(link => link.classList.remove('active'));
                categoryLink.classList.add('active');
                // 展开子菜单
                document.getElementById('assetMenu').classList.add('show');
            }
        } else if (currentPath.includes('Asset_Inbound.html')) {
            // 选中资产入库
            const inboundLink = document.querySelector('a[href="Asset_Inbound.html"]');
            if (inboundLink) {
                document.querySelectorAll('.sidebar-link').forEach(link => link.classList.remove('active'));
                inboundLink.classList.add('active');
                // 展开子菜单
                document.getElementById('assetMenu').classList.add('show');
            }
        } else if (currentPath.includes('Asset_Scrap.html')) {
            // 选中资产报废
            const scrapLink = document.querySelector('a[href="Asset_Scrap.html"]');
            if (scrapLink) {
                document.querySelectorAll('.sidebar-link').forEach(link => link.classList.remove('active'));
                scrapLink.classList.add('active');
                // 展开子菜单
                document.getElementById('assetMenu').classList.add('show');
            }
        } else if (currentPath.includes('Inventory_Query.html')) {
            // 选中库存查询
            const queryLink = document.querySelector('a[href="Inventory_Query.html"]');
            if (queryLink) {
                document.querySelectorAll('.sidebar-link').forEach(link => link.classList.remove('active'));
                queryLink.classList.add('active');
                // 展开子菜单
                document.getElementById('inventoryMenu').classList.add('show');
            }
        }
    });
</script>
<script src="/static/jq/jquery-1.4.4.min.js"></script>
<script>

    // 控制面板的 ajax 请求
    $(function (){
        // 控制面板的 ajax 请求
        $.ajax({
            url: "/home",
            type: "get",
            dataType: "json",//   data:{"pageId":pageId},
            success: function (data) {
                console.log(data)
                var  allAssetSum =     data.allAssetSum   // 总资产数量
                console.log(data.allAssetSum)  // 总资产数量
                $("#allAssetSum").append("<h3>"+data.allAssetSum+"</h3>");

                var  noUseAsset =     data.noUseAsset // 闲置资产数量
                console.log(data.noUseAsset) // 闲置资产数量
                $("#noUseAsset").append("<h3>"+data.noUseAsset+"</h3>");

                var  upAsset =     data.upAsset  // 维修中资产数量
                console.log(data.upAsset)     // 维修中资产数量
                $("#upAsset").append("<h3>"+data.upAsset+"</h3>");

                var  useAsset =     data.useAsset  // 在用资产数量
                console.log(data.useAsset) // 在用资产数量
                $("#useAsset").append("<h3>"+data.useAsset+"</h3>");

                console.log(data.fiveAsset) // 近五天入库资产数量
                for (let i = 0; i < data.fiveAsset.length; i++) {
                    $("#zjzchd").append("<tr>" +
                        "<td>"+data.fiveAsset[i].id+"</td>" +                // id
                        "<td>"+data.fiveAsset[i].name+"</td>" +               // 姓名
                        "<td>"+data.fiveAsset[i].type.name+"</td>" +   // 操作类型
                        "<td>"+data.fiveAsset[i].dept.name+"</td>" +        // 部门
                        "<td>"+data.fiveAsset[i].acquisition_date+"</td>" +  // 时间
                        "<td><span class='badge badge-warning'>"+data.fiveAsset[i].state.name+"</span></td>" +   // 状态
                        "</tr>")
                }

                // 初始化资产分类统计图表
                const assetCategoryChart = echarts.init(document.getElementById('assetCategoryChart'));
                const assetCategoryOption = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: [data.assetByByte[0].name, data.assetByByte[1].name,data.assetByByte[2].name ]
                    },
                    series: [
                        {
                            name: '资产分类',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '16',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: data.assetByByte[0].num, name: data.assetByByte[0].name },
                                { value: data.assetByByte[1].num, name: data.assetByByte[1].name },
                                { value: data.assetByByte[2].num, name: data.assetByByte[2].name},
                            ]
                        }
                    ]
                };
                assetCategoryChart.setOption(assetCategoryOption);

                // 初始化资产价值统计图表
                const assetValueChart = echarts.init(document.getElementById('assetValueChart'));
                const assetValueOption = {
                    tooltip: {
                        trigger: 'axis',
                        formatter: function(params) {
                            let result = params[0].name + '<br/>';
                            params.forEach(param => {
                                let value = param.value;
                                if (param.seriesName === '新增资产价值') {
                                    value = '¥' + value.toLocaleString();
                                } else if (param.seriesName === '同比增长') {
                                    value = value + '%';
                                }
                                result += param.marker + param.seriesName + ': ' + value + '<br/>';
                            });
                            return result;
                        }
                    },
                    legend: {
                        data: ['新增资产价值', '同比增长'],
                        top: 10
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    },
                    yAxis: [
                        {
                            type: 'value',
                            name: '金额 (¥)',
                            position: 'left',
                            min: 3000, // 设置最小值为1000
                            max: 9000, // 设置最大值为10000
                            axisLabel: {
                                formatter: function(value) {
                                    return '¥' + value.toLocaleString();
                                }
                            }
                        },
                        {
                            type: 'value',
                            name: '增长率 (%)',
                            position: 'right',
                            axisLabel: {
                                formatter: '{value}%'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '新增资产价值',
                            type: 'bar',
                            data: data.monthMany,
                            itemStyle: {
                                color: '#3498db'
                            }
                        },
                        {
                            name: '同比增长',
                            type: 'line',
                            yAxisIndex: 1,
                            smooth: true,
                            data: data.monthManyZen,
                            itemStyle: {
                                color: '#e74c3c'
                            },
                            markLine: {
                                data: [
                                    {
                                        type: 'average',
                                        name: '平均值'
                                    }
                                ]
                            }
                        }
                    ]
                };
                assetValueChart.setOption(assetValueOption);
            },
        })
    })

</script>

</body>
</html>





